<!-- 买单 -->
<template>
  <div class="paybill">
    <div class="pay-roof">
      <div class="roof-content">
        <div class="roof-cuon">
          <div class="pay-img">
            <img src="/static/images/user.png" />
          </div>
          <div class="pay-title">
            <p class="title-p1">深圳上门到家服务</p>
            <p class="title-p">电话：15275695623</p>
            <p class="title-p">地址：中国广东省深圳市罗湖区北站路</p>
          </div>
        </div>
        <div class="roof-button">
          <p class="button-left">
            <i class="iconfont icon-daohang"></i>
            <span>立即导航</span>
          </p>
          <p class="button-right">
            <i class="iconfont icon-dianhua"></i>
            <span>电话咨询</span>
          </p>
        </div>
      </div>
    </div>
    <!-- 表单 -->
    <div class="pay-from">
      <div class="pay-user">
        <div class="logo">
          <img src="/static/images/user.png" />
        </div>
        <p class="name">徐文龙</p>
      </div>
      <p class="from-p"></p>
      <div class="from-div">
        <div class="text-sp">
          <span>￥</span>
        </div>
        <p class="text-p">消费金额（咨询店员输入）</p>
      </div>
      <div class="from-div">
        <div class="text-sp quan">
          <span>券</span>
        </div>
      </div>
      <div class="from-div">
        <div class="text-sp quan2">
          <span>￥</span>
        </div>
        <p class="sum-p">
          <span class="sum">余额{{balance}}元</span>
        </p>
      </div>
      <div class="from-div">
        <div class="text-sp">
          <span>店员</span>
        </div>
        <p class="sum-p">
          <span class="sum">点击选择></span>
        </p>
      </div>
      <div class="from-div">
        <div class="text-sp">
          <input v-model="atn" placeholder="备注" class="inpu" />
        </div>
      </div>
      <div class="from-div">
        <div class="text-sp jine">
          <span>应付金额￥{{jine}}</span>
        </div>
      </div>
    </div>
    <div class="pay-button">
      <button>立即支付</button>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      balance: 900000,
      atn: "",
      jine: 80000
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.pay-roof {
  width: 100%;
  height: 240rpx;
  background-color: #ff634e;
  position: relative;
}
.roof-content {
  width: 90%;
  height: 220rpx;
  margin-left: 5%;
  border-radius: 18rpx;
  background-color: #ffffff;
  position: absolute;
  top: 30%;
  left: 0;
  box-shadow: 0 0 6px 3px #fff8fa;
}
.roof-cuon {
  height: 140rpx;
  display: flex;
}
/* 底部 */
.roof-button {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  bottom: 0;
}
.iconfont {
  font-size: 20px;
  display: inline-block;
}
.button-left {
  height: 80rpx;
  background-color: #ffb9b0;
  flex: 0.5;
  border-bottom-left-radius: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-left span {
  color: #ffffff;
  font-size: 32rpx;
  margin-left: 16rpx;
}
.button-right {
  height: 80rpx;
  background-color: #ff634e;
  flex: 0.5;
  border-bottom-right-radius: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-right span {
  color: #ffffff;
  font-size: 32rpx;
  margin-left: 16rpx;
}
.pay-img > img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-top: 10rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
}
.title-p1 {
  color: black;
  font-size: 32rpx;
  margin-top: 8rpx;
  margin-bottom: 8rpx;
}
.title-p {
  color: #8d8d8d;
  font-size: 26rpx;
  margin-bottom: 8rpx;
}
/* 表单 */
.pay-from {
  margin-top: 90rpx;
}
.pay-user {
  height: 100rpx;
  display: flex;
  align-items: center;
  border-top: 1rpx solid #e7e7e7;
}
.logo > img {
  width: 80rpx;
  height: 80rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
}
.from-p {
  height: 10rpx;
  background-color: #e7e7e7;
}
.name {
  font-size: 30rpx;
}
.from-div {
  height: 80rpx;
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #e7e7e7;
}
.text-sp {
  margin-left: 40rpx;
}
.sum-p {
  flex: 1;
  text-align: right;
}
.sum {
  color: #8d8d8d;
  font-size: 30rpx;
  margin-right: 40rpx;
}
.text-sp > span {
  font-size: 30rpx;
}
.quan {
  width: 45rpx;
  height: 45rpx;
  line-height: 45rpx;
  display: inline-block;
  border-radius: 40rpx;
  background-color: blueviolet;
  color: #ffffff;
}
.quan2 {
  width: 45rpx;
  height: 45rpx;
  line-height: 45rpx;
  display: inline-block;
  border-radius: 40rpx;
  background-color: #ffd132;
  color: #ffffff;
}
.text-p {
  font-size: 26rpx;
  color: #a4a4a4;
  flex: 0.9;
  text-align: center;
}
.inpu {
  font-size: 30rpx;
}
.jine {
  width: 100%;
  text-align: right;
}
.jine span {
  margin-right: 40rpx;
  font-size: 30rpx;
  color: #a4a4a4;
}
.pay-button > button {
  width: 90%;
  height: 80rpx;
  line-height: 80rpx;
  margin-left: 5%;
  margin-top: 20rpx;
  color: #ffffff;
  font-size: 34rpx;
  background-color: #a8a8a8;
}
</style>